<template>
    <div>
 <span>
      <div class="crumbs">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item class="a1" :to="{ path: '/houseAllocation' }">房源分配</el-breadcrumb-item>
          <el-breadcrumb-item class="b1" :to="{ path: '/beginAllocation' }">开始分配</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </span>
        <div class="card-container">
            <el-card class="card1">
        <el-container>
            <el-header>
                <el-row style="margin-top: 16px">
                    <el-select v-model="query0.yqBed" clearable placeholder="请选择园区">
                    <el-option
                        v-for="item in yqData"
                        :key="item.idYq"
                        :label="item.nameYq"
                        :value="item.idYq">
                    </el-option>
                    </el-select>
                    <el-select v-model="query0.buildingsBed" clearable placeholder="请选择楼栋" @input="getFloorNumber">
                        <el-option
                            v-for="item in filteredBuilding"
                            :key="item.idBuildings"
                            :label="item.nameBuildings"
                            :value="item.idBuildings">
                        </el-option>
                    </el-select>
                    <el-select v-model="query0.floorBed" clearable placeholder="请选择楼层">
                        <el-option
                            v-for="count in floorNumber"
                            :key="count"
                            :label="count"
                            :value="count">
                        </el-option>
                    </el-select>
                    <el-button @click="getUnusedBedList" round style="width: 90px;border-radius: 5px;background: #275ce6;"><div class="txtx">查询</div></el-button>
                    <el-button class="btbt"><div class="txtx2"></div>重置</el-button>
                </el-row>
            </el-header>
            <el-main class="std" >
                <el-table
                        :data="users"
                        style="width: 100%"
                        stripe>
                    <el-table-column
                            prop="yqBed"
                            label="园区"
                            width="180">
                        <template slot-scope="scope">
                            {{formatYq(scope.row.yqBed)}}
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="buildingsBed"
                            label="楼栋"
                            width="180">
                        <template slot-scope="scope">
                            {{formatBuildings(scope.row.buildingsBed)}}
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="floorBed"
                            label="楼层">
                        <template slot-scope="scope">
                            {{formatFloor(scope.row.floorBed)}}
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="roomsBed"
                            label="房间编号">
                    </el-table-column>
                    <el-table-column
                            prop="numBed"
                            label="床位编号">
                    </el-table-column>
                    <el-table-column
                            prop="price"
                            label="房间价格">1000
                    </el-table-column>
                    <el-table-column
                            label="操作">
                        <template slot-scope="scope">
                            <el-button @click="bedAllocation(scope.row)" type="text" size="small">床位分配</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-main>
            <el-footer class="std2" >
                <el-pagination class="btm_choseBox"
                               background
                               @size-change="handleSizeChange"
                               @current-change="handleCurrentChange"
                               :current-page="query0.pageNo"
                               :page-sizes="[10,20]"
                               :page-size="query0.pagesize"
                               layout="total, sizes, prev, pager, next"
                               :total="total">
                </el-pagination>
            </el-footer>
        </el-container></el-card>
            <el-card class="card2">
                <div class="card-container">
                    <el-card class="card2_1">
                        <div class="card-container">
                            <img src="../../../../assets/images/card3_logo1.png" alt="" class="card2_1_logo">
                            <span class="card2_1_text1">本科生拥有床位</span>
                            <span class="card2_1_text2">查看名单调整 ></span>
                            <div class="text-container1">
                            <span class="card2_1_number1">{{spareBedNumber}}</span>
                            <span class="card2_1_text3">个</span>
                            </div>
                            <span class="card2_1_text4">本科生正在使用床位</span>
                            <div class="text-container2">
                            <span class="card2_1_number2">{{bksBedNumber}}</span>
                            <span class="card2_1_text5">个</span>
                            </div>
                        </div>
                    </el-card>
                    <el-card class="card2_2">
                        <div class="card-container">
                            <div class="card-container">
                                <img src="../../../../assets/images/card3_logo2.png" alt="" class="card2_1_logo">
                                <span class="card2_1_text1">研究生拥有床位</span>
                                <span class="card2_1_text2">查看名单调整 ></span>
                                <div class="text-container1">
                                <span class="card2_1_number1">{{spareBedNumber}}</span>
                                <span class="card2_1_text3">个</span>
                                </div>
                                <span class="card2_1_text4">研究生正在使用床位</span>
                                <div class="text-container2">
                                <span class="card2_1_number2">{{yjsBedNumber}}</span>
                                <span class="card2_1_text5">个</span>
                                </div>
                            </div>
                        </div>
                    </el-card>
                    <el-card class="card2_3">
                        <div class="card-container">
                            <img src="../../../../assets/images/card2_3logo.png" alt="" class="card2_1_logo">
                            <span class="card2_1_text1">教职工拥有床位</span>
                            <span class="card2_1_text2">查看名单调整 ></span>
                            <div class="text-container1">
                            <span class="card2_1_number1">{{spareBedNumber}}</span>
                            <span class="card2_1_text3">个</span>
                            </div>
                            <span class="card2_1_text4">教职工正在使用床位</span>
                            <div class="text-container2">
                            <span class="card2_1_number2">{{otherBedNumber}}</span>
                            <span class="card2_1_text5">个</span>
                            </div>
                        </div>
                    </el-card>
                </div>
            </el-card>
            <el-dialog
                title="床位分配"
                :visible.sync="dialogVisible"
                width="30%">
                <el-row>
                    <el-col :span="24"><div class="text4BA">确认床位信息</div></el-col>
                </el-row>
                <el-row>
                    <el-col :span="4"><div class="grid-content bg-purple"><div class="text4BA">园区</div></div></el-col>
                    <el-col :span="4"><div class="grid-content bg-purple"><div class="text4BA">楼栋</div></div></el-col>
                    <el-col :span="4"><div class="grid-content bg-purple"><div class="text4BA">楼层</div></div></el-col>
                    <el-col :span="4"><div class="grid-content bg-purple"><div class="text4BA">房间编号</div></div></el-col>
                    <el-col :span="4"><div class="grid-content bg-purple"><div class="text4BA">床位</div></div></el-col>
                    <el-col :span="4"><div class="grid-content bg-purple"><div class="text4BA">床位id</div></div></el-col>
                </el-row>
                <el-row>
                    <el-col :span="4"><div class="grid-content bg-purple-light"><div class="text4BA">{{formatYq(bedChosen.yqBed)}}</div></div></el-col>
                    <el-col :span="4"><div class="grid-content bg-purple-light"><div class="text4BA">{{formatBuildings(bedChosen.buildingsBed)}}</div></div></el-col>
                    <el-col :span="4"><div class="grid-content bg-purple-light"><div class="text4BA">{{formatFloor(bedChosen.floorBed)}}</div></div></el-col>
                    <el-col :span="4"><div class="grid-content bg-purple-light"><div class="text4BA">{{bedChosen.roomsBed}}</div></div></el-col>
                    <el-col :span="4"><div class="grid-content bg-purple-light"><div class="text4BA">{{bedChosen.numBed}}</div></div></el-col>
                    <el-col :span="4"><div class="grid-content bg-purple-light"><div class="text4BA">{{bedChosen.idBed}}</div></div></el-col>
                </el-row>
                <el-form :model="bedAllocationData" label-width="80px">
                    <el-form-item label="输入学号/工号以分配" label-width="150px">
                        <el-input v-model="bedAllocationData.idStudent"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="submit">确 定</el-button>
            </span>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import {
  bksBedData,
  degreeStudentData,
  getUnusedBedList,
  spareBed,
  yjsBedData,
  otherBedData,
  findStudent,
  bedAllocation,
  buildingList, yqList
} from '../../../../api/user'

export default {
  name: 'second',
  data () {
    return {
      currentPage: '1',
      pagesize: '20',
      bksNumber: 0,
      bksBedNumber: 0,
      bksNoBedNumber: 0,
      yjsNumber: 0,
      yjsBedNumber: 0,
      yjsNoBedNumber: 0,
      spareBedNumber: 0,
      otherBedNumber: 0,
      otherNoBedNumber: 0,
      query0: {
        idBed: '',
        yqBed: '',
        buildingsBed: '',
        floorBed: '',
        pageNo: 1,
        pagesize: 10
      },
      users: [],
      total: 0,
      query2: {
        idYq: '',
        nameYq: ''
      },
      query3: {
        idBuildings: '',
        yqBuildings: '',
        nameBuildings: '',
        floorsBuildings: ''
      },
      yqData: [],
      buildingData: [],
      floorNumber: 1,

      dialogVisible: false,
      bedChosen: {},
      bedAllocationData: {
        idStudent: null,
        yqStudent: 0,
        buildingsStudent: 0,
        roomsStudent: 0,
        bedStudent: 0
      }
    }
  },
  methods: {
    formatYq (yqStudent) {
      let n0 = ''
      for (var i = 0; i < this.yqData.length; i++) {
        if (this.yqData[i].idYq === yqStudent) { n0 = this.yqData[i].nameYq; break }
      }
      return n0
    },
    formatFloor (floor) {
      return floor + 'F'
    },
    formatBuildings (buildingsStudent) {
      let n0 = ''
      for (var i = 0; i < this.buildingData.length; i++) {
        if (this.buildingData[i].idBuildings === buildingsStudent) { n0 = this.buildingData[i].nameBuildings; break }
      }
      return n0
    },
    getBuildingList () {
      buildingList(this.query3).then(res => {
        this.buildingData = res.data.records
      })
    },
    getYqList () {
      yqList(this.query2).then(res => {
        this.yqData = res.data.records
      })
    },
    getFloorNumber () {
      let n0 = this.query0.buildingsBed
      for (var i = 0; i < this.buildingData.length; i++) {
        if (this.buildingData[i].idBuildings === n0) { this.floorNumber = this.buildingData[i].floorsBuildings }
      }
    },
    handleSizeChange: function (size) {
      this.query0.pagesize = size
      this.getUnusedBedList()
    },
    handleCurrentChange: function (currentPage) {
      this.query0.pageNo = currentPage
      this.getUnusedBedList()
    },
    getPageData () {
      degreeStudentData().then(res => {
        let data1 = res.data.map(x => x.number)
        this.bksNumber = data1[0]
        this.yjsNumber = data1[1] + data1[2]
      })
      bksBedData().then(res => {
        let data2 = res.data.map(x => x.number)
        this.bksBedNumber = data2[0]
        this.bksNoBedNumber = data2[1]
      })
      yjsBedData().then(res => {
        let data3 = res.data.map(x => x.number)
        this.yjsBedNumber = data3[0]
        this.yjsNoBedNumber = data3[1]
      })
      otherBedData().then(res => {
        let data4 = res.data.map(x => x.number)
        this.otherBedNumber = data4[0]
        this.otherNoBedNumber = data4[1]
      })
      spareBed().then(res => {
        let data4 = res.data.map(x => x.number)
        this.spareBedNumber = data4[0]
      })
    },
    getUnusedBedList () {
      getUnusedBedList(this.query0).then(res => {
        this.users = res.data.records
        this.total = res.data.total
      })
    },
    bedAllocation (row) {
      this.bedChosen = JSON.parse(JSON.stringify(row))
      this.bedAllocationData.yqStudent = this.bedChosen.yqBed
      this.bedAllocationData.buildingsStudent = this.bedChosen.buildingsBed
      this.bedAllocationData.roomsStudent = this.bedChosen.roomsBed
      this.bedAllocationData.bedStudent = this.bedChosen.idBed
      this.bedAllocationData.hasbedStudent = 1
      this.dialogVisible = true
    },
    submit () {
      findStudent(this.bedAllocationData).then(res => {
        console.info(res)
        if (res.data) {
          if (res.data.hasbedStudent === 1) {
            this.$message({
              type: 'warning',
              message: '检测到该学号/工号已有对应床位，无法分配'
            })
          } else {
            bedAllocation(this.bedAllocationData).then(res => {
              if (res.data) {
                this.$message({
                  type: 'success',
                  message: '修改成功!'
                })
                this.getPageData()
                this.getUnusedBedList()
                this.dialogVisible = false
              } else {
                this.$message({
                  type: 'warning',
                  message: '未知原因，分配失败，请联系管理员'
                })
              }
            })
          }
        } else {
          this.$message({
            type: 'warning',
            message: '没有找到相关信息'
          })
        }
      })
    }
  },
  computed: {
    filteredBuilding () {
      return this.buildingData.filter(item => item.yqBuildings === this.query0.yqBed)
    }
  },
  created () {
    this.getPageData()
    this.getUnusedBedList()
    this.getYqList()
    this.getBuildingList()
  }
}
</script>
<style lang="less" scoped>
@import "../../../../assets/styles/pages";
.card-container{
  display: flex;
  flex-wrap:wrap;
}
.el-container{
  background: #FFFFFF;
}
.btbt{
  width: 90px;
  border-radius: 5px;
  background: #fff;
  border: 1px solid #275ce6;
}
.txtx{
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0.19px;
  text-align: left;
  color: #fff;
}
.txtx2{
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0.19px;
  text-align: left;
  color: #275ce6;
}
.a1{
  color: #808080;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0;
  margin-top: 23px;
  margin-left: 16px;
  display: inline-block;
}
.b1{
  color: #1a1a1a;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0;
  margin-top: 23px;
  display: inline-block;
}
.card1{
  width: 68%;
  height: 943px;
  margin-left: 16px;
  margin-top: 22px;
    overflow-y: auto;
}
.card2{
  width: 502px;
  height: 943px;
  margin-left: 16px;
  margin-top: 22px;
}
.card2_1{
  width: 457px;
  height: 294px;
    background-image: url("../../../../assets/images/card2-1bg.png");
}
.card2_2{
  width: 457px;
  height: 294px;
  margin-top: 12px;
    background-image: url("../../../../assets/images/card2-2bg.png");
}
.card2_3{
  width: 457px;
  height: 294px;
  margin-top: 12px;
    background-image: url("../../../../assets/images/card2-3bg.png");
}
.card2_1_logo{
    width: 36px;
    height: 36px;
    margin-left: 4px;
    margin-top: 0px;
}
.card2_1_number1{
    font-weight: 700;
    font-size: 89px;
    text-align: left;
    color: #fff;
    margin-top: 20px;
}
.card2_1_number2{
    font-weight: 700;
    font-size: 36px;
    text-align: left;
    color: #fff;
    margin-top: 165px;
}
.card2_1_text1{
    font-weight: 700;
    font-size: 16px;
    text-align: left;
    color: #fff;
    margin-top: 10px;
    margin-left: 10px;
}
.card2_1_text2{
    font-weight: 400;
    font-size: 14px;
    text-align: right;
    color: #fff;
    position: fixed;
    margin-top: 12px;
    margin-left: 330px;
}
.card2_1_text3{
    font-weight: 700;
    font-size: 19px;
    text-align: left;
    color: #fff;
    margin-top: 90px;
}
.card2_1_text4{
    font-weight: 400;
    font-size: 14px;
    text-align: left;
    color: #fff;
    position: fixed;
    margin-top: 180px;
    margin-left: 5px;
}
.card2_1_text5{
    font-weight: 400;
    font-size: 14px;
    text-align: left;
    color: #fff;
    margin-top: 190px;
}
.text-container1{
    display: flex;
    flex-wrap:wrap;
    position: fixed;
    margin-top: 35px;
}
.text-container2{
    display: flex;
    flex-wrap:wrap;
    position: fixed;
    margin-top: 45px;
    margin-left: 5px;
}
.el-row {
    margin-bottom: 5px;
    &:last-child {
        margin-bottom: 0;
    }
}
.el-col {
    border-radius: 4px;
}
.bg-purple-dark {
    background: #99a9bf;
}
.bg-purple {
    background: #d3dce6;
}
.bg-purple-light {
    background: #e5e9f2;
}
.grid-content {
    //border-radius: 4px;
    min-height: 36px;
}
.row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
}
.text4BA{
    text-align: center;
    padding: 10px ;
}
</style>
